<template>
  <div>
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
      <!-- 下拉框学院查询 -->
      <el-select v-model="collegeId" placeholder="请选择学院" readonly>
        <el-option
          v-for="item in collegeAll"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <!--    下拉框专业查询-->
      <el-select
        v-model="majorId"
        @click="queryMajorData"
        placeholder="请选择专业"
        readonly
      >
        <el-option
          v-for="item in queryMajorAll"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <!-- 姓名 -->
      <el-input
        v-model="name"
        @keyup.enter.native="loadPost"
        placeholder="请输入用户名称"
        suffix-icon="el-icon-search"
        style="width: 190px; margin-left: 5px"
      ></el-input>
      <!-- 性别 -->
      <el-select
        v-model="gender"
        placeholder="请选择性别"
        style="width: 140px; margin-left: 5px"
      >
        <el-option
          v-for="item in genders"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="status"
        placeholder="请选择报名状态"
        style="width: 140px; margin-left: 5px"
      >
        <el-option
          v-for="item in statuses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="loadPost"
        >查询</el-button
      >
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
    </div>

    <!--    列表展示-->
    <el-table
      :data="registrationForms"
      :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
    >
      <el-table-column prop="id" label="id" width="160"> </el-table-column>
      <el-table-column label="学院名称" width="140">
        <template slot-scope="scope">
          {{ getCollegeName(scope.row.collegeId) }}
        </template>
      </el-table-column>
      <el-table-column label="专业名称" width="100">
        <template slot-scope="scope">
          {{ getmajorName(scope.row.majorId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户名称"
        width="80"
      ></el-table-column>
      <el-table-column prop="gender" label="性别" width="60">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.gender === 0 ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.gender === 0 ? "男" : "女" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="个人描述"
        width="160"
      ></el-table-column>
      <el-table-column prop="status" label="通过状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row.status)" disable-transitions>{{
            getStatusLabel(scope.row.status)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="140">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="del(scope.row.id)"
            style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页  -->
    <div class="pagination-wrapper">
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="报名管理信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :before-close="handleClose"
    >
      <!--      报名管理信息表单-->
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="id" prop="id">
          <el-col :span="15">
            <el-input v-model="form.id"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-col :span="15">
            <el-input v-model="form.userId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="form.collegeId" placeholder="请选择学院" readonly>
            <el-option
              v-for="item in collegeAll"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-select
            v-model="form.majorId"
            @click="queryMajorData"
            placeholder="请选择专业"
          >
            <el-option
              v-for="item in queryMajorAll"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称" prop="name">
          <el-col :span="15">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-col :span="15">
            <el-input v-model="form.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="报名状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">未处理</el-radio>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { del } from "@/api/registrationService/registrationManagement/Delete";
import { mod } from "@/api/registrationService/registrationManagement/Mod";
import { query } from "@/api/registrationService/registrationManagement/query";
import { collegeQueryAll } from "@/api/collegeManagement/queryAll";
import { querCollegeId } from "@/api/major/queryCollegeId";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "registrationManagement",
  data() {
    return {
      shouldLogRegistrationForms: true, // 控制是否执行日志记录
      collegeAll: [], // 存储学院区域选项数据
      majorAll: [], // 存储专业区域选项数据
      queryMajorAll:[],
      registrationForms: [],
      page: 1,
      limit: 5,
      total: 0,
      name: "",
      majorId: "",
      collegeId: "",
      gender: "",
      genders: [
        {
          value: "0",
          label: "男",
        },
        {
          value: "1",
          label: "女",
        },
      ],
      status: "",
      statuses: [
        {
          value: "0",
          label: "未处理",
        },
        {
          value: "1",
          label: "通过",
        },
        {
          value: "2",
          label: "未通过",
        },
      ],
      id: "",
      centerDialogVisible: false,
      isPrivate: false,
      form: {
        collegeId: "",
        description: "",
        gender: 0,
        id: "",
        majorId: "",
        name: "",
        phone: "",
        status: 0,
        userId: "",
      },
      rules: {
        title: [{ required: true, message: "请输入头衔名称", trigger: "blur" }],
      },
    };
  },
  watch: {
    // 监视userInfoForm.collegeId的变化
    collegeId: {
      handler(newVal) {
        // 当collegeId变化时，调用majorData方法
        this.majorId = '';
        this.queryMajorData(newVal);
      },
    },
    "form.collegeId": {
      handler(newVal) {
        // 当collegeId变化时，调用majorData方法
        this.form.majorId = '';
        this.queryMajorData(newVal);
      },
    },
  },
  methods: {
    //将展示列表的学院id换成学院名称
    getCollegeName(collegeId) {
      const college = this.collegeAll.find((c) => c.id === collegeId);
      return college ? college.name : "未选择学院";
    },
    //将展示列表的专业id换成专业名称
    getmajorName(majorId) {
      const major = this.majorAll.find((c) => c.id === majorId);
      return major ? major.name : "未选择专业";
    },

    //通过状态的标签
    getTagType(status) {
      switch (status) {
        case 0:
          return "warning"; // 未处理，通常使用黄色
        case 1:
          return "success"; // 通过，通常使用绿色
        case 2:
          return "danger"; // 未通过，通常使用红色
        default:
          return "info"; // 默认情况，使用蓝色
      }
    },
    getStatusLabel(status) {
      switch (status) {
        case 0:
          return "未处理";
        case 1:
          return "通过";
        case 2:
          return "未通过";
        default:
          return "未知";
      }
    },
    //重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },

    //新增按钮
    add() {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    //修改
    mod(row) {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        //赋值到表单
        this.id = row.id;
        this.form.id = row.id;
        this.form.title = row.title;
        this.form.collegeId = row.collegeId;
        this.form.description = row.description;
        this.form.gender = row.gender;
        this.form.majorId = row.majorId;
        this.form.name = row.name;
        this.form.phone = row.phone;
        this.form.status = row.status;
        this.form.userId = row.userId;
      });
    },
    //删除
    del(id) {
      del(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    //修改
    doMod() {
      mod(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
          this.resetForm();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    //提交数据到后台
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            //如果有id则修改
            this.doMod();
          }
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.loadPost();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadPost();
    },
    resetParam() {
      this.name = "";
      this.collegeId = "";
      this.majorId = "";
      this.gender = "";
      this.status = "";
      this.loadPost();
    },
    loadPost() {
      const params = {
        collegeId: this.collegeId,
        name: this.name,
        majorId: this.majorId,
        gender: this.gender,
        status: this.status,
      };
      query(this.page, this.limit, params).then((res) => {
        if (res.code === 20000) {
          this.registrationForms = res.data.page.records;
          this.total = res.data.page.total;
          for (let index = 0; index < this.registrationForms.length; index++) {
            if (this.registrationForms[index].collegeId) {
              this.majorData(this.registrationForms[index].collegeId);
            }
          }
        }
      });
    },
    collegeData() {
      collegeQueryAll()
        .then((res) => {
          this.collegeAll = res.data.collegeList.map((item) => ({
            id: item.id,
            name: item.name,
          }));
        })
        .catch((error) => {
          console.error("Error fetching region data:", error);
        });
    },
    
    majorData(collegeId) {
      // 确保传入学院ID
      if (!collegeId) return;
      querCollegeId(collegeId).then((res) => {
      console.log(res);
      console.log(collegeId);
      
      if (res.code == 20000) {
        // 假设这里存在一个方法来将查询到的专业数据添加到当前表单对象中
        this.majorAll = res.data.majorList.map((item) => ({
          id: item.id,
          name: item.name,
        }));
      }else{
        this.$message.error("查询专业失败，请稍后再试")
      }
      });
    },
    queryMajorData(collegeId) {
      // 确保传入学院ID
      if (!collegeId) return;
      querCollegeId(collegeId).then((res) => {
      console.log(res);
      console.log(collegeId);
      
      if (res.code == 20000) {
        // 假设这里存在一个方法来将查询到的专业数据添加到当前表单对象中
        this.queryMajorAll = res.data.majorList.map((item) => ({
          id: item.id,
          name: item.name,
        }));
      }else{
        this.$message.error("查询专业失败，请稍后再试")
      }
      });
    },
    fetchMajorDataForAllRegistrations() {
      for (let index = 0; index < this.registrationForms.length; index++) {
        if (this.registrationForms[index].collegeId) {
          this.majorData(this.registrationForms[index].collegeId);
          this.queryMajorData(this.registrationForms[index].collegeId);
        }
      }
    },
  },
  beforeMount() {
    this.loadPost();
    this.collegeData();
  },
};
</script>

<style scoped>
.pagination-wrapper {
  bottom: 0;
  width: 100%;
  /*background-color: #f5f5f5;*/
  padding: 10px 20px;
  /*box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  max-width: 800px; /* 设置最大宽度以避免在大屏幕上过分拉伸 */
  margin: 0 30%; /* 居中显示分页组件 */
}
</style>
